import { useRoute } from "vue-router"
import { getCategoryAPI } from '@/apis/category'
import { ref,onMounted } from "vue"
import { onBeforeRouteUpdate } from "vue-router"

export function useCategory(){
    // 创建一个route实例，以获取组件路由的id参数，方便进行数据请求
    const route=useRoute()
    // 获取数据
    const categoryData =ref({})
    const getCategory= async (id= route.params.id)=>{  //默认参数的写法
        const res=await getCategoryAPI(id)
        categoryData.value=res.result
    }
    onMounted(() => {
        getCategory()
    })
    // 解决路由缓存，分类下的参数变化带来多次请求（有些是固定的，并不需要请求，造成浪费）
    onBeforeRouteUpdate((to)=>{
        // 需要重新发送获取数据请求，route有滞后性，无法满足需求
        // 引入 to参数,id参数传给函数，所以原函数需要新设置一个参数
        console.log("路由变化了,新路由信息是",to);
        getCategory(to.params.id)
        
    })
    return{
        categoryData
    }
}